// http://ionicframework.com/docs/v2/theming/

// Helper Sass
.hidden {
  display:none !important;
}
.text-primary {
  color:color($colors, primary);
}
.text-secondary {
  color:color($colors, secondary);
}
.text-danger {
  color:color($colors, danger);
}
.text-light {
  color:color($colors, light);
}
.text-dark {
  color:color($colors, dark);
}
.text-white {
  color:color($colors, white);
}
.text-pink {
  color:color($colors, pink);
}
.text-purple {
  color:color($colors, purple);
}
.text-green {
  color:color($colors, green);
}
.text-highlight {
  color:#ff9326;
}
.text-lowlight {
  color:color($colors, lowlight);
}
.text-small {
  font-size:0.8em;
}
.marg-top {
  margin-top:$spacing;
}
.marg-right {
  margin-right:$spacing;
}
.marg-bottom {
  margin-bottom:$spacing;
}
.marg-left {
  margin-left:$spacing;
}
.pad-top {
  padding-top:$spacing;
}
.pad-right {
  padding-right:$spacing;
}
.pad-bottom {
  padding-bottom:$spacing;
}
.pad-left {
  padding-left:$spacing;
}

// Animation Sass
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
ion-header > ion-navbar > .toolbar-background {
  background:color($colors, white);
}
ion-header > ion-navbar > ion-buttons[end] > button:not(:last-child) {
  margin-right:$spacing;
}
ion-header > ion-navbar > ion-buttons[end] > button ion-badge {
  position:absolute;
  top:-2px;
  left:-4px;
  background-color:color($colors, danger);
  font-size:0.6em;
  min-width:0;
  padding:2px 4px;
}
ion-content {
  background:color($colors, light) !important;
}
ion-footer .button-full {
  margin:0;
}
ion-footer .button-small {
  height:2.8em;
}
ion-footer .button[color="white"] {
  color:color($colors, primary);
}
ion-footer .button i {
  margin:0 $spacing;
}
super-tabs-toolbar .toolbar-background {
  background-color:color($colors, white);
}
super-tab-button {
  color:color($colors, secondary);
  height:45px !important;
}
super-tab-button.selected {
  color:color($colors, primary);
}
super-tab-button .title {
  text-transform:none;
  line-height:45px !important;
}
ion-navbar .bar-button {
  font-size:1em;
}
ion-modal ion-backdrop {
  visibility:visible !important;
  z-index:auto !important;
}


// Side Menu Sass
// --------------------------------------------------
.side-menu-header {
  background-color:#F5F8F2;
  padding:$spacing * 4 $spacing * 4 $spacing * 2 $spacing * 4;
  border-bottom:1px solid color($colors, light);

}
.side-menu-header img {
  max-width:160px;
  max-height:40px;
  margin-top:$spacing;
}
.side-menu-header h1 {
  margin:16px 0 6px;
  font-size:1em;
}
.side-menu-header h3 {
  font-size:0.8em;
  color:#666;
}
.side-menu-header p {
  font-size:0.8em;
  color:#666;
  margin:0;
}
.side-menu-content, .side-menu-content .scroll-content {
  background-color:#fff;
}
.side-menu-content button, .side-menu-footer button {
  box-shadow:none;
}
.side-menu-content .button-inner, .side-menu-footer .button-inner {
  color:#333;
  text-align:left;
  justify-content:left;
  font-size:0.9em;
}
.side-menu-content .button-inner i, .side-menu-footer .button-inner i {
  margin-right:30px;
  font-size:1.4em;
}
.side-menu-footer {
  border-top:1px solid color($colors, light);
}
